<template>
    <div class="Propsview">
    <ul>
        <li v-for="item in list" :key="item.age">
            {{ item.name }}
        </li>
    </ul>
    
    </div>
</template>

<script setup lang="ts" name="Props">
    // import { withDefaults } from 'vue';
    import { type Persons } from '@/types/types';
// import { Person } from '../types/types';

//     只接受
//    defineProps(['list'])

//  接收list但是限制类型为 Persons

    defineProps<{
        list: Persons
    }>()

    // withDefaults(defineProps<{
    //     list: Persons
    // }>(), {
    //     list: [
    //         {
    //             name: '张三',
    //             age: 18,
    //             address: '男',
    //             email: '123@qq.com',
    //         },
    //         {
    //             name: '李四',
    //             age: 19,
    //             address: '女',
    //         },
    //         {
    //             name: '王五',
    //             age: 20,
    //             address: '男',
    //         },
    //     ]
    // })



</script>

<style scoped>

Propsview {
    color: #42b983;
    font-family: Arial, sans-serif;
    text-align: center;
    margin: 20px;
}

button {
    margin-top: 10px;
    padding: 5px 10px;
    background-color: #42b983;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}
button:hover {
    background-color: #369870;
}
</style>